English

网络图像新标准 SVG

2000-09-20 来源:中华读书报 □5D精英网 www.5dmedia.comLakesea 我有话说

又一强音响彻Web界,这就是8月2日由W3C(国际互联网标准组织)正式发布了SVG格式的建议书,由于W3C的特殊身份,SVG在业界引起了强烈的反响。众多知名厂商纷纷宣布了对SVG的支持。W3C互动图像领导人ChrisLilley宣称:SVG出现之前,Web设计师还不得不以像素的形式来定义图像的宽和高,并且用点阵方式的图像格式存储,而SVG的出现将改变这一状况,它可以让网页设计师用矢量形式保存图像,并且可以高质量、高速度地在Web上传送。

那么,SVG到底是什么呢?

什么是SVG?

新标准是相对于老标准而言,目前网上的图像标准有三个,一个是JPEG(联合图像专家组),一个是GIF(图形交换格式),还有一个是PNG(可移植网络图形)。它们各有特色:JPEG格式是一种有损压缩的格式,由于它具有很高的压缩比,使用专门的JPEG压缩工具压缩程度可以达到180:1,而且图像质量受到损失不大(仅从浏览的角度讲),大大方便了网上传输和用磁盘交换文件。GIF(图形交换格式)是一种索引颜色格式,有两个突出的特点,一是在颜色数很少的情况下,产生的文件量极小;另一是它可以用动态的形式出现。PNG是专门针对Web开发的一种无损压缩图像,结合了以上两种图像的优点,它的压缩比要大大超过LZW等传统的图像无损压缩算法,同时它还支持透明背景和动态效果,极有希望代替JPEG和GIF成为新一代网络图像标准。

互联网的发展速度远远超乎人们的意料,就在PNG还没有普及的情况下,美国著名多媒体厂商Macromedia开发的图像格式(或者应该称做互动矢量动画格式更为确切)SWF粉墨登场,并借助Flash强大的动画能力,以横扫千军之势占据了人们的浏览器,俨然成了新一代互联网图像的事实标准。而在平面出版占据霸主地位的Adobe公司也不甘示弱,借助它原来的PDF格式,力推自己的E-paper方案,试图在Web图像市场分得一杯羹。其它厂商也纷纷推出自己的Web图像解决方案,互联网的图像标准即将进入一场诸侯割据的场面。

就在此时,又一强音响彻Web界,这就是8月2日由W3C(国际互联网标准组织)正式发布了SVG格式的建议书,由于W3C的特殊身份,SVG在业界引起了强烈的反响。众多知名厂商纷纷宣布了对SVG的支持,包括Microsoft、Netscape、Sun、HP、IBM、Apple、Adobe、Macromedia、Autodesk、Corel、Visio、BitFlash、ILOG、INSO、OASIS、OpenText、Quark、RAL(CCLRC)、Xerox等。W3C互动图像领导人ChrisLilley宣称:SVG出现之前,Web设计师还不得不以像素的形式来定义图像的宽和高,并且用点阵方式的图像格式存储,而SVG的出现将改变这一状况,它可以让网页设计师用矢量形式保存图像,并且可以高质量、高速度地在Web上传送。

那么,SVG到底是什么呢?SVG(ScalableVectorGraphics,可升级矢量图像)是一种开放标准的文本式矢量图形描述语言。使用SVG可以在网页上显示出各种各样的高质量的矢量图形,包括许多图像处理中常见的功能,如图形、文字、动画、色彩、滤镜效果等。最关键的是:SVG完全用普通文本来描述,也就是说,这是一种专门为网络而设计的基于文本的图像格式。并且SVG基于XML(ExtensibleMarkupLanguage),所以可扩展性很强,能够描述任意复杂的图像。

SVG的特点

1.基于XML标准

XML是公认拥有无穷生命力的下一代网络标记语言。与HTML一样,XML也源自SGML(StandardGeneralizeMarkupLanguage,一种老资格的通用标记语言),它拥有HTML语言所缺乏的巨大的伸缩性与灵活性。XML不再像HTML一样有着一成不变的格式,它实际上是一种定义语言,即使用者可以定义无穷无尽的标记来描述文件中的任何数据元素,从而突破HTML固定标记集合的约束,使文件的内容更丰富、更复杂、更容易组成一个完整的信息体系。

2.矢量图像

矢量图像由线框和填充构成,它由计算机根据矢量数据计算后绘制而成。矢量图像相对于位图图像有以下特点:1)文件的大小与图形的复杂程度有关,而与图形的具体尺寸无关;2)图形的显示尺寸可以无级缩放,变化后不影响图形的质量。所以在图形复杂程度不大的情况下,矢量图像具有文件量小、可无级缩放的优点。正是由于矢量图像的这些特征,使得它尤其适合于网上传播。

3.由文本构成的图像

SVG最奇妙之处在于它是一种文本格式的图像。也就是说,我们可以不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像。这对于图像处理的工作者来说可能会感到不可思议。其实仔细想想也可以理解,矢量图像一般是以算法指令来描述,例如一个实心圆的矢量图像可以这样来生成:“以坐标(50,80)为圆心画一个半径为10个像素的圆,用红色填充。”而SVG就是采用了这样的指令方式:

<svgwidth=“100”height=“200”>

<circlecx=“50”cy=“80”r=“10”

style=“fill:red”/>

</svg>

从这个例子中很容易看出一个圆是如何描述出来的。

建立在文本基础上的SVG图像中所有的描述语句都可以直接观察到,所以也非常容易进行二次修改与更新,“可升级”的特点在这里可以得到恰当的反映。

4.灵活的文件格式

SVG可升级的特性不仅仅表现在二次修改方面,还表现在另外很多地方,包括这里介绍的灵活的文件格式。在以前的图像中,文本都作为位图而保存于图像中,图像形成以后不能单独对文本进行修改;在PNG格式中这一点有所改进,文本可作为一个独立的层存在;SVG更灵活地扩展了图像的文件格式,它由三个部分组成:矢量图形、位图和文字。这样SVG不仅仅可以应用矢量图像和文字对象,同样可以纳入位图,可以制作出任何其它格式图像能达到的效果。由于文件格式是文本形式的,可以很容易地在以后任何时候进行修改。而且在页面运行的过程中,也可以对很多部分做即时的修改,其中的图形描述还可以重复使用。

5.支持交互性

图片和交互在以前是两个分开的概念。例如在一个网页中,按钮仅仅是一个图像,按钮的交互部分是由网页中的Script语句来实现。SVG的出现突破了这个限制。它支持SMIL(SynchronizedMulti?mediaIntegrationLanguage),使得在图片内进行交互成为可能,这是以往的图像所不能做到的。

6.内嵌式动态字体

有过DHTML(动态HTML)经验的用户都知道,DHTML中可使用用户系统中没有的字体,在用户浏览需要时通过Web即时下载。这对于英文系统来说是可以理解的,因为一种英文字体的文件大小一般在几十K左右。而对于中文系统来说,这种方法便不可取,因为任何一种中文字体的文件量都在2、3M以上,用户不可能为了观看几个汉字而浪费大量的时间和精力。

SVG采用了一种科学的方法来解决动态字体的问题,它内嵌了图像中所出现的文字的字体形状,用户不需要完全下载所有的字体文件。这对于中文用户来说是相当便利的。

SVG展望

可以说,SVG的“矢量描述”并不是一个全新的概念,但它综合了矢量图形、点阵图像和纯文字的优点,以一种标准将其统一起来描述,这较之于目前网络上流行的压缩式点阵图像有着无与伦比的优势。况且,文字与图形并非封装于SVG内,而是可以借助DOM和Script等手段与外界交互,这更非一般的GIF或JPEG图像可比。

统一的标准和开放性是SVG的强大生命力所在。标准统一可增强网络的交流,结束目前业界各种格式并存的混乱局面;开放性则有利于日后的各种新的元素加入其中扩充其功能。SVG使用时,客户端的软件负责解释SVG文本并将其转化成实际的矢量图像,文字仍是文字,线条仍是线条,可在客户端即时修改,这也是SVG的一大特色。

SVG作为W3C组织正式推荐的图像格式,拥有众多的支持机构。像Adobe公司已经宣称将在推出的Adobe图像处理套件如Illus?trator、Photoshop、GoLive和Cyber?Studio中集成SVG的全部功能,并且还提供NetscapeNavigator和IE的插件,以便使其能够直接支持SVG文件的浏览。Netscape和Mi?crosoft公司也已经开始进军SVG领域,这标志着未来的网络浏览器将会内置对SVG文件的支持功能。

SVG的文本格式并不意味着必须用文本来编辑图像,我们大可以使用能生成SVG格式图像的工具软件来像平时处理图像一样工作,只是最后输出结果时多一步生成SVG图像的步骤而已。SVG文本式的灵活格式使得它更适合于广告、宣传、地图、统计图表和流程图等文字图像综合应用的领域,同时它还由于可链接、可缩放、体积小等优点,在网络上也必将十分流行,国外有的学者甚至还断言SVG将成为PDF文件格式的取代者。这种说法是对是错还不知道,但至少SVG能与PDF抗衡是没错的。

手机光明网

光明网版权所有

光明日报社概况 | 关于光明网 | 报网动态 | 联系我们 | 法律声明 | 光明网邮箱 | 网站地图

光明网版权所有